<template>
  <div class="Navs_dlog1">
    <!-------------------- 这是左边图标 ------------------------->
    <div class="logo">
      <img src="..\images\匠-书房.png" alt />
    </div>
    <!------------------- 这是左边图标 结束 -------------------------->
    <!---------------------- 这是右边导航 --------------->
    <div class="nav_lists">
      <ul class="nav_titles">
        <li>
          <a href="#">天奇图书</a>
        </li>
        <li>
          <a href="#">VIP</a>
        </li>
        <li>
          <a href="#">书点</a>
        </li>
        <li>
          <a href="#">笔记本</a>
        </li>
        <li>
          <a href="#">联系客服</a>
        </li>
        <li>
          <a href="#">网站导航</a>
        </li>
        <li>
          <a href="#">收藏夹</a>
        </li>
        <li>
          <a href="#">
            <router-link to="/service">服务</router-link>
            <router-view></router-view>
          </a>
        </li>
        <li>
          <a href="#">
            <router-link to="/riester">注册</router-link>
            <router-view></router-view>
          </a>
        </li>
        <li>
          <a href="#">
            <router-link to="/login">登录</router-link>
            <router-view></router-view>
          </a>
        </li>
        <li @click="login">
          <a href="#">购物车</a>
        </li>
        <div class="nav_ce"></div>
      </ul>
    </div>
    <!---------------------- 这是右边导航 结束 --------------->
    <!---------------------- 这是右边搜索框 --------------->

    <div class="search">
      <input type="text" placeholder="请输入图书名" />
      <span></span>
    </div>
    <!---------------------- 这是右边搜索框 结束 --------------->
  </div>
</template>
<script>
export default {
  name: "Navs_dlog",
  methods: {
    login() {
      this.comi("changyes");
      // this.tologin = true;
    },
  },
};
</script>
<style scoped>
.Navs_dlog1 {
  width: 1350px;
  height: 90px;
  margin: 0 10px;
  max-width: 1100px;
  display: flex;
}

.logo {
  width: 56px;
  height: 56px;
  /* 垂直居中对齐 */
  display: flex;
  display: inline-block;
  margin-top: 20px;
}
.logo img {
  width: 70px;
  margin-top: -8px;
}
.nav_lists {
  /* 相对定位 */
  /* position: relative; */
  width: 550px;
  height: 90px;
  /* 转换成行内块 */
  display: inline-block;
  margin-left: 150px;
}
.nav_titles {
  padding: 0;
  margin: 0;
  width: 700px;
  height: 100%;
  list-style-type: none;
  /* 绝对定位 */
  /* position: absolute; */
  /* 弹性布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav_titles li {
  font-size: 14px;
}
/* 未被点击过的链接 */
.nav_lists a {
  color: black;
  text-decoration: none;
}
/* 鼠标经过的链接 */
.nav_lists a:hover {
  color: rgb(228, 135, 30);
}
.nav_titles li:hover {
  color: rgb(228, 135, 30);
}
input {
  height: 41px;
  width: 240px;
  margin-top: 20px;
  margin-left: 300px;
  color: black;
  outline: none;
  border: 1px solid rgb(207, 204, 204);
  padding: 0 15px;
}
/* 字体图标样式  */
.search span {
  position: absolute;
  margin-top: 20.5px;
  font-family: icomoon;
  font-size: 19.5px;
  /* line-height: 90px; */
  /* border: 1px 1px 1px 1px solid black; */
  outline: 1px solid rgb(207, 204, 204);
  padding: 12px;
  color: rgb(0, 0, 0);
}
/* hover效果 */
.search span:hover {
  background-color: #ff6700;
}
.search input:hover {
  border: 1px solid #999;
}
.search input:active {
  border: 1px solid #ff6700;
}
/* 字体图标 */
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?hscswy");
  src: url("fonts/icomoon.eot?hscswy#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?hscswy") format("truetype"),
    url("fonts/icomoon.woff?hscswy") format("woff"),
    url("fonts/icomoon.svg?hscswy#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
</style>